16 피드 템플릿 실습 (Template + Serializers 적용) | ✅ 편저: 코담 운영자

16강 - 피드 템플릿 실습 (Template + Serializers 적용)

화면 실습 with Template, Serializers

---

✨ 이번 강의 목표

• 시리얼라이저로 구성된 피드 데이터를 템플릿에 렌더링
• 사용자 프로필, 댓글, 좋아요, 삭제 기능 등을 Tailwind 기반으로 구성
• JavaScript로 Ajax 기반 동적 로딩 처리 (loadMorePosts.js)

---

1. 프로젝트 디렉토리 구조 요약

Django-Instagram/
├── django_instagram/
├── posts/
│   ├── api/
│   ├── templates/posts/index.html
│   ├── static/js/posts/loadMorePosts.js
│   ├── views.py
├── users/
├── db.sqlite3

API + 템플릿 + JS 코드가 유기적으로 결합되어 피드가 동작

---

2. URL 설정 (posts/urls.py)

from django.urls import path
from . import views

app_name = "posts"

urlpatterns = [
    path('', views.index, name="index"),
    path('create/', views.post_create, name='post_create'),
]

• /posts/ → index 뷰에서 사용자 정보 및 템플릿 렌더링
• /posts/create/ → 글 작성 페이지로 연결

---

3. posts/views.py (템플릿용 index 뷰)

from django.shortcuts import render, get_object_or_404, redirect
from django_instagram.users.models import User as user_model
from django.urls import reverse

def index(request):
    if request.method == 'GET': 
        if request.user.is_authenticated:
            user = get_object_or_404(user_model, pk=request.user.id)                        
            return render(request, 'posts/index.html', {"user": user})
    return redirect(reverse('users:main'))

• 로그인한 사용자만 접근 가능
• 유저 정보와 함께 index.html 템플릿 렌더링

---

4. posts/api/views.py - PostListView

class PostListView(generics.ListAPIView):
    serializer_class = PostSerializer
    permission_classes = [permissions.IsAuthenticated]

    def get_queryset(self):
        user = get_object_or_404(user_model, pk=self.request.user.id)
        following = user.following.all()
        return Post.objects.filter(Q(author__in=following) | Q(author=user))

    def list(self, request, *args, **kwargs):
        queryset = self.get_queryset()
        serializer = self.get_serializer(queryset, many=True, context={'request': request})
        return Response({"posts": serializer.data}, status=status.HTTP_200_OK)

✅ 핵심 정리

• 로그인한 사용자의 글 + 팔로우 유저의 글 조회
• PostSerializer로 직렬화
• context로 request를 넘겨 CSRF 토큰 활용

---

5. JS 파일 (loadMorePosts.js 요약)

const response = await fetch(`/api/posts/?format=json`);
const data = await response.json();
data.posts.forEach(post => {
  // 프로필, 이미지, 좋아요, 댓글 반복 출력
  // 좋아요 처리: userId 포함 여부 확인
  // 삭제: postDelete / commentDelete 함수 사용
});

기능 요약

• fetch()로 API 호출 후 post들을 반복 렌더링
• 좋아요 하트 클릭 처리
• 댓글 삭제, 글 삭제 버튼 렌더링 (본인일 때만)
• 댓글 입력 폼 렌더링 + CSRF 토큰 포함

---

6. 템플릿 예시 (index.html 내부)

{% for post in posts %}
<div class="rounded-lg shadow bg-white">
  {% if post.author.profile_photo %}
    <img src="{{ post.author.profile_photo }}" class="w-10 h-10 rounded-full">
  {% else %}
    <img src="/static/images/posts/no_avatar.png" class="w-10 h-10">
  {% endif %}

  <p>{{ post.author.username }}</p>
  <img src="{{ post.image }}" class="w-full">
  <p>{{ post.caption }}</p>
  <p>좋아요: {{ post.image_likes|length }}</p>

  {% for comment in post.comment_post %}
    <p><b>{{ comment.author.username }}</b>: {{ comment.contents }}</p>
  {% endfor %}
{% endfor %}

---

7. PostSerializer 설명

class PostSerializer(serializers.ModelSerializer):
    comment_post = CommentSerializer(many=True)
    author = FeedAuthorSerializer()
    csrf_token = serializers.SerializerMethodField()

    def get_csrf_token(self, obj):
        request = self.context.get('request')
        return get_token(request)

• 중첩 구조 직렬화 (Post → Comments → Author)
• CSRF 토큰을 Serializer에서 함께 전달 → JS 폼에서 사용

---

✅ 정리

• Django 템플릿 + DRF API + JavaScript를 유기적으로 연결해 피드 구성
• 시리얼라이저에서 CSRF 토큰을 포함하여 Ajax 기반 작업 가능하게 설계
• 댓글 삭제/작성/좋아요 클릭 등은 JS와 HTML 구조로 처리

👉 다음 강의에서는 댓글 등록 기능과 Ajax 기반 인터랙션을 구현합니다.